import React from 'react';
import {
    StyledHorizontalRule,
    StyledMenuItem,
    StyledUserProfileMenu,
} from './UserProfileMenu.styled';

/**
 * @typedef { Object } - Интерфейс для элемента меню.
 * @property { string } item - Текст элемента меню.
 * @property { () => void } onClick - Обработчик клика по элементу меню.
 */
interface IMenuItem {
    item?: string;
    onClick?: () => void;
}

/**
 * @typedef { Object } - Интерфейс для свойств меню пользователя.
 * @property { IMenuItem[] } menuItems - Массив элементов меню.
 * @property { string } menuColor - Цвет меню.
 */
interface IUserProfileMenuProps {
    menuItems: IMenuItem[];
    menuColor: string;
}

/**
 * @function UserProfileMenu - Компонент меню пользователя.
 * @param { IMenuItem[] } menuItems - Массив элементов меню.
 * @param { string } menuColor - Цвет меню.
 * @returns { React.JSX.Element } - Возвращает JSX элемент меню пользователя.
 */
export const UserProfileMenu = (
    {
        menuItems,
        menuColor
    }: IUserProfileMenuProps
): React.JSX.Element => (
    <StyledUserProfileMenu menuColor={menuColor}>
        {menuItems.map((el, index) => (
            <React.Fragment key={el.item}>
                {menuItems.length - 1 === index && <StyledHorizontalRule />}
                <StyledMenuItem menuColor={menuColor} onClick={el.onClick}>{el.item}</StyledMenuItem>
            </React.Fragment>
        ))}
    </StyledUserProfileMenu>
);

export default UserProfileMenu;
